<script setup>
import axios from 'axios'
import { ref } from 'vue'

const ans = ref('')
const question = ref('')
const imgUrl = ref('')
const send = () => {
  axios.post('/api-img/', {
    'question': question.value,
    'index': 2,
    'imgUrl': imgUrl.value
  })
      .then(function (response) {
        ans.value = response.data.msg
        console.log(response.data)
      })
      .catch(function (error) {
        console.log(error)
      })
}
</script>

<template>
  <div class="container">

    <img :src="imgUrl"
              class="img"
    />
    <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">

      <el-input type="text"
                placeholder="请输入图片链接"
                class="input"
                v-model="imgUrl"></el-input>
      <el-input type="textarea"
                placeholder="请输入问题"
                v-model="question"></el-input>
      <el-button type="primary" @click="send">发送</el-button>
      <div>{{ ans }}</div>
    </div>
  </div>
</template>

<style scoped
>
.container{
  display: flex;
  width: 100%;
  height: 100%;
  /*background-color: red;*/
}
.img{
  width: 300px;
  height: 300px;
}
.input{
  max-width: calc(100vw - 300px);
  width: calc(100vw - 400px);
}
</style>
